<template>
  <section>
    <!-- 挂账 -->
    <table border="0" width="100%" style="border-spacing: 0;border-collapse: collapse;">
      <tr>
        <td style="font-size:18px;">挂账列表</td>
        <td></td>
        <td style="text-align:right;vertical-align: top;">
          <el-form :inline="true">
            <el-form-item>
              <!-- <el-input v-model="form.patientId"></el-input> -->
              <!-- <el-autocomplete
  v-model="state"
  :fetch-suggestions="querySearchAsync"
  placeholder="请输入内容"
  @select="remoteMethod"
              ></el-autocomplete>-->
              <el-select v-model="form.patientId" filterable clearable remote reserve-keyword placeholder="请输入患者名字" :remote-method="remoteMethod" :loading="loading">
                <el-option v-for="item in options" :key="item.patientId" :label="item.name" :value="item.patientId"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-date-picker v-model="form.startTime" class="pay_date" type="date" value-format="yyyy-MM-dd" placeholder="开始时间"></el-date-picker>----
              <el-date-picker v-model="form.endTime" class="pay_date" type="date" value-format="yyyy-MM-dd" placeholder="结束时间"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" circle icon="el-icon-search" @click="getData(-1)"></el-button>
            </el-form-item>
          </el-form>
        </td>
      </tr>
    </table>
    <div class="retail_box">
      <el-col v-for="(item,index) in tabList" :key="index" :xs="12" :sm="12" :md="12" :lg="8" :xl="6" class="reserve-user-list" style="padding-left: 10px; padding-right: 10px;">
        <div :class="['card-box','bg-sy']">
          <div class="card-nr">
            <div v-if="item.patientInfo">
              <img v-if="!item.patientInfo.head" src="@/img/unknown-avatar.png" alt class="head-img" style="width:70px;height:70px;" />
              <img v-else :src="item.patientInfo.head | imageUrl" class="head-img" alt style="width:70px;height:70px;" />
            </div>
            <div style="overflow: hidden;">
              <p class="overflow-omit" v-if="item.patientInfo">
                <span style="font-size:18px;">{{item.patientInfo.name}}</span>
                &nbsp;
                <span>({{item.patientInfo.sex|toSex}}&nbsp;{{item.patientInfo.age}}岁)</span>
              </p>
              <!-- <div style="margin-top:5px;" class="overflow-omit" >登记科室：{{item.deptName}}（{{item.registerName}}）</div> -->
              <div class="overflow-omit">
                <span>挂账金额 ￥{{item.remainAmount}}</span>
                <!-- &nbsp;<span>等候：{{item.gmtCreate|computeHour}}</span> -->
              </div>
              <div class="overflow-omit">
                <span>创建时间：{{item.gmtCreate}}</span>
              </div>
            </div>
           
          </div>
          <div class="card-footer">
            <div @click="getRepay(item)">还账</div>
            <div @click="getDetail(item)">查看详情</div>
          </div>
           <!-- <div v-if="item.patientInfo.levelId" class="vip-box">
              <el-tooltip :content="item.patientInfo.levelName" placement="top">
                <img src="@/img/icon-vip.png" alt="">
              </el-tooltip>
            </div> -->
        </div>
      </el-col>
      <br />
      <el-col :span="24">
        <pager v-model="pager" @change-pagenum="getData"></pager>
      </el-col>
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      form: {
        status: 0,
        source: 1,
        patientId: "",
        startTime: "",
        endTime: ""
      },
      pager: { pageSize:12, pageNum: 1, total: 0 },
      tabList: [],
      loading: false,
      options: []
    };
  },
  created(){
    this.form.startTime=this.getNewDate();
    this.form.endTime=this.getNewDate();
  },
  mounted() {
    this.getData();
  },
  activated(){
    this.getData();
  },
  methods: {
    getData(type) {
      let th = this;
      if (type == -1) {
        th.pager.pageNum = 1;
        th.pager.total = 0;
      }
      let j = {};
      j = Object.assign(th.form, th.pager);
      th.$api.getDiscount(j).then(res => {
         if (res.executed) {
            th.tabList = res.dataBody.list;
            th.pager.total=res.dataBody.total;
          }else{
              th.$message.error(res.message);
          }
      });
    },
    //模糊搜索
    remoteMethod(query) {
      let th = this;
      if (query !== "") {
        th.loading = true;
        setTimeout(() => {
          th.loading = false;
          th.$api
            .getThePatientLibraryList({
              nameOrMobile: query,
              hpId: th.adminUser.hpId,
              pageNum: 1,
              pageSize: 100
            })
            .then(res => {
              if (res.executed) {
                if (res.dataBody != undefined) {
                  let List = res.dataBody.list;
                  th.options = List.filter(item => {
                    return (
                      item.name.toLowerCase().indexOf(query.toLowerCase()) > -1
                    );
                  });
                  // th.tableList = Arrary;
                  // th.pager.total = res.dataBody.total;
                } else {
                  th.tableList = [];
                  th.pager.total = 0;
                }
              }
            });
        }, 200);
      } else {
        this.options = [];
      }
    },
    //获取详情
    getDetail(obj) {
      let th = this;
      let j = {};
      if (obj != null) {
        j = {
          id: th.jiaMi(obj.patientId)
        };
      } else {
        j = {
          id: th.jiaMi(0)
        };
      }
      th.addNavMenu("病人库", '/page/userDetail' + th.$utils.JsonToUrl(j),'userDetail');
      th.$router.push({
        path: "/page/userDetail",
        query: th.getUrlToken(j)
      });
    },
    getRepay(item) {
      let th = this;
      let j = {
        amount: item.remainAmount,
        id: item.id,
        patientId: th.jiaMi(item.patientId),
        orderId: item.orderId
      };
      th.$router.push({ path: "/page/chargeRepay", query: th.getUrlToken(j) });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../_css/reserve.scss";
.pay_date {
  width: 40% !important;
}
</style>